<template>
  <view class="biling-record-detail">
    <view class="biling-record-detail__price">
      <view class="label">
        <image  src="https://jiejinda.oss-cn-beijing.aliyuncs.com/26f10e4328373bc863e8fc9ebc74bd2e0de6fca026121dde8ab8a95ff48cba40.png"></image>
        <text>余额提现-微信零钱</text>
      </view>
      <view class="biling-record-detail__price--num">
        <text>¥</text>
        <view>200.</view>
        <text>05</text>
      </view>
    </view>
    <view class="biling-record-detail__record">
      <label>当前状态</label>
      <view class="biling-record-detail__record--steps">
        <view class="step-item">
          <view class="step-item__content">
            <text>发起提现</text>
          </view>
          <view class="step-item__content--sub">2024/05/10 08:23:15</view>
        </view>

        <view class="step-item step-item--success">
          <uni-icons class="step-item__icon" type="checkbox" color="#277EEF" size="22"></uni-icons>
          <view class="step-item__content">提现到账</view>
          <view class="step-item__content--sub">2024/06/20 13:23:11</view>
        </view>
      </view>
    </view>

    <view class="biling-record-detail__other">
      <label>提现金额</label>
      <text>¥1300.00</text>
    </view>
    <view class="biling-record-detail__other">
      <label>提现单号</label>
      <text>12345678901234567890</text>
    </view>
  </view>
</template>


<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.biling-record-detail {
  height: 100vh;
  padding: 84rpx 50rpx;
  background-color: #fff;

  &__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 2rpx solid #eee;
    .label {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 10rpx;
      }
    }
    &--num {
      display: flex;
      align-items: center;
      margin: 24rpx 0 52rpx;
      font-weight: bold;
      text {
        font-size: 48rpx;
      }
      view {
        margin-left: 8rpx;
        font-size: 72rpx;
      }
    }
  }

  &__record {
    display: flex;
    padding: 72rpx 0;
    font-size: 28rpx;
    border-bottom: 2rpx solid #eee;
    label {
      flex-shrink: 0;
      margin-right: 78rpx;
      color: #aaa;
    }
    &--steps {
      flex: 1 0 0;
      .step-item {
        position: relative;
        padding-bottom: 50rpx;
        padding-left: 26rpx;
        color: #aaa;
        &::before {
          position: absolute;
          top: 0;
          left: -10rpx;
          width: 18rpx;
          height: 18rpx;
          content: '';
          background-color: $uni-color-primary;
          border-radius: 50%;
        }
        &--success {
          .step-item__content {
            color: #333;
          }

          &::before {
            display: none;
          }
        }
        &:not(:last-child) {
          border-left: 2rpx dashed $uni-color-primary;
        }
        &__content {
          position: relative;
          top: -10rpx;
          &--sub {
            margin-top: 8rpx;
          }
        }
        &__icon {
          position: absolute;
          top: -10rpx;
          left: -20rpx;
        }
      }
    }
  }

  &__other {
    display: flex;
    margin-top: 58rpx;
    font-size: 28rpx;
    color: #333;
    label {
      margin-right: 78rpx;
      color: #999;
    }
  }
}
</style>
